<template>
  <Layout>
    <div class="upload-wrapper" v-if="showUpload">
      <UploadPan ref="upload" v-model="fileList" :form="form" class="create-folder reset" :model="appConfig.model"
        :appConfig="appConfig" @on-close="handleCloseUpload" />
    </div>
  </Layout>
</template>

<script>
import Layout from './layout'
import UploadPan from '@/components/Upload/index'
import { getToken, getCwRecordConfig } from '@/api/index'
import { getUrlParam } from '@/utils/index'
export default {
  name: 'App',
  components: {
    Layout,
    UploadPan
  },
  data() {
    return {
      showForm: false,
      fileList: [],
      form: {
        bucket: 'zc-cw-record',
        region: 'oss-cn-beijing'
      },
      showUpload: false,
      appConfig: {}
    }
  },
  methods: {
    handleCloseUpload() {
      this.fileList = []
    },
  },
  async mounted() {
    //1.获取页面参数
    const { type, uid } = getUrlParam();
    if (!type || !uid) {
      this.$notify.error({
        title: '页面参数错误',
        dangerouslyUseHTMLString: true,
        message: '缺少type或uid'
      });
      return;
    }

    try {

      //2.获取后台配置信息
      this.appConfig = await getCwRecordConfig({ type, uid })
      await getToken();
      this.$message.success('获取STS凭证成功', { duration: 1000 })
      this.showUpload = true
      this.showForm = false

    } catch (e) {
      this.$notify.error({
        title: '请求失败',
        dangerouslyUseHTMLString: true,
        message: e
      });
      this.showUpload = false
    }

  }
}
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}

.btn-wrapper {
  margin: 20px 0;
}

.form-wrapper {
  width: 500px;
  margin: 25px auto;

  .alert {
    margin-bottom: 10px;
  }
}
</style>